<template>
    <div class="videoClassroomList">
        <top></top>
        <mall-header></mall-header>
        <div class="videoClassroomList_advert">
            <img src="@/assets/images/supplierDisplayCenter/videoTop.png" alt="" />
        </div>
        <div class="videoClassroomList_filter w1200">
            <div class="videoClassroomList_filter_title">视频课堂</div>
            <div class="catalogBox" v-if="topFormData.length > 0">
                <div class="titBox" v-for="(item, ind) in topFormData" :key="ind">
                    <span class="firstChild">{{ item.name }}:</span>
                    <span v-for="(child, index) in item.value" :key="index" class="primary_text_color">
                        <template v-if="index < item.value.length - 1">{{ child.name }}、</template>
                        <template v-else>{{ child.name }}</template>
                    </span>
                    <span @click="removeItem(item, ind)">
                        <img src="../../assets/images/supplierDisplayCenter/react.png" alt style="cursor: pointer" />
                    </span>
                </div>
                <div style="cursor: pointer; display: inline-block" @click="resetEffect">
                    清空筛选
                </div>
            </div>
            <div class="filter-wrapper">
                <a-row class="videoClassroomList_filter_row">
                    <a-col :span="2" style="
                  font-family: PingFangSC-Medium, PingFang SC, sans-serif;
                  line-height: 30px;
                  font-size: 11px;
                  color: #323232;
                ">发布时间:</a-col>
                    <a-col :span="20">
                        <a-range-picker format="YYYY-MM-DD HH:mm:ss" @change="onChange" />
                    </a-col>
                </a-row>
                <filter-item :isCheckbox="false" :default-params="typeParams" :data="typeList" title="视频类型"
                    @ok="handleFilter($event, 'typeParams', '视频类型')"></filter-item>

                <filter-item :isCheckbox="false" :default-params="durationParams" :data="durationList" title="视频时长"
                    @ok="handleFilter($event, 'durationParams', '视频时长')"></filter-item>

                <a-row class="videoClassroomList_filter_row">
                    <a-col :span="2" style="
                font-family: PingFangSC-Medium, PingFang SC, sans-serif;
                line-height: 30px;
                font-size: 11px;
                color: #323232;
              ">视频名称:</a-col>
                    <a-col :span="20">
                        <a-input placeholder="请输入视频名称" v-model="videoName" :style="{ width: '200px' }"
                            @blur="loadData(true)" />
                    </a-col>
                </a-row>
            </div>
        </div>
        <div class="videoClassroomList_list w1200">
            <div class="videoClassroomItem" v-for="(item, index) in meetingData" @click="playVideo(item)" :key="index">
                <div class="videoImgWrap">
                    <img class="videoImg" :src="item.videoMainImg" />
                    <span class="videoTime">{{ item.videoDurationStr }}</span>
                </div>
                <div class="videoName">
                    <span class="name">{{ item.videoName }}</span>
                    <span class="tag" v-if="item.videoType == '1'">培训</span>
                    <span class="tag" v-if="item.videoType == '2'">产品</span>
                    <span class="tag" v-if="item.videoType == '3'">供应商</span>
                </div>
                <div class="videoSub">{{ item.videoIntroduction }}</div>
                <div class="videoInfo">
                    <div>
                        <img class="icon" src="@/assets/images/supplierDisplayCenter/icon7.png" />
                        <span>{{ item.publisher }}</span>
                    </div>
                    <div class="videoMonth">{{ item.releaseTime }}</div>
                    <div>
                        <img class="icon" src="@/assets/images/supplierDisplayCenter/icon8.png" />
                        <span>{{ item.viewCounts }}</span>
                        <img class="icon" src="@/assets/images/supplierDisplayCenter/icon9.png" />
                        <span>{{ item.videoScore }}</span>
                    </div>
                </div>
            </div>
        </div>
        <a-row class="pagination-box w1200">
            <a-col :span="6" class="pagination-l">
                <div>
                    共 {{ paging.total }} 条记录 第 {{ paging.current }} /
                    {{ Math.ceil(paging.total / paging.pageSize) }} 页
                </div>
            </a-col>
            <a-col :span="18" class="pagination-r">
                <a-pagination :pageSizeOptions="paging.pageSizeOptions" :total="paging.total" showSizeChanger
                    showQuickJumper :pageSize="paging.pageSize" v-model="paging.current" @showSizeChange="onShowSizeChange"
                    @change="pageChange">
                    <template slot="buildOptionText" slot-scope="props">
                        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                        <span v-if="props.value === '50'">全部</span>
                    </template>
                </a-pagination>
            </a-col>
        </a-row>
    </div>
</template>
    
<script>
import FilterItem from "@/components/base/FilterItem";
import common from "@/assets/js/common.js";
import Top from '@/components/base/Top.vue'
import MallHeader from '@/components/base/MallHeader.vue'
import { videoClassroomListPage } from '@/api/video'

export default {
    name: "videoClassroomList",
    components: {
        FilterItem,
        Top,
        MallHeader
    },
    data() {
        return {
            rateNum: 3,
            meetingData: [],
            typeParams: [],
            typeList: [
                {
                    code: "1",
                    name: "培训",
                },
                {
                    code: "2",
                    name: "产品",
                },
                {
                    code: "3",
                    name: "供应商",
                }
            ],
            topFormData: [],
            durationParams: [],
            durationList: [
                {
                    code: "1",
                    name: "0-10分钟",
                },
                {
                    code: "2",
                    name: "10-30分钟",
                },
                {
                    code: "3",
                    name: "30-60分钟",
                },
                {
                    code: "4",
                    name: "60分钟以上",
                }
            ],
            // 分页
            paging: {
                pageSizeOptions: common.pageConfig.pageSizeOptions,
                pageSize: common.pageConfig.pageSize,
                current: 1,
                total: 0,
            },
            basBeginTime: "",
            basEndTime: "",
            videoName: '',
            videoDurationMin: undefined,
            videoDurationMax: undefined
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {
        playVideo(item) {
            let routeData = this.$router.resolve({
                path: "/videoPlay",
                query: { videoMainImg: item.videoMainImg, videoUrl: item.videoUrl }
            });
            window.open(routeData.href, "_blank");
        },
        // 顶部删除事件
        removeItem(item, index) {
            this.topFormData.splice(index, 1);
            this._data[item.key].splice(0, this._data[item.key].length);
            this.loadData();
        },
        resetEffect() {
      this.topFormData.splice(0, this.topFormData.length);
            this.typeParams.splice(0, this.topFormData.length);
            this.durationParams.splice(0, this.durationParams.length);
            this.videoDurationMax = undefined
            this.videoDurationMin = undefined
            this.loadData();
        },
        enrollClick(item) {
            console.log(item);
            this.$refs.enrollModal.setTitleAndId(item.name, item.id);
            this.$refs.enrollModal.open();
        },
        transformDura() {
            switch (this.durationParams[0]) {
                case '1':
                    this.videoDurationMin = '0'
                    this.videoDurationMax = '10'
                    break;
                case '2':
                this.videoDurationMin = '10'
                    this.videoDurationMax = '30'
                    break;
                case '3':
                this.videoDurationMin = '30'
                    this.videoDurationMax = '60'
                    break;
                case '4':
                this.videoDurationMin = '60'
                    break;
                default:
                    break;
            }
        },
        loadData(reload) {
            if (reload) {
                this.paging.current = 1;
            }

            
            let param = {
                statusList: this.statusParams,
                areaNameList: this.areaNameParams,
                basEndTime: this.endTime,
                videoType: this.typeParams.length == 0 ? undefined : this.typeParams[0],
                basBeginTime: this.startTime,
                showStatus: 1,
                page: this.paging.current,
                limit: this.paging.pageSize,
                videoName: this.videoName,
                status: '1'
            };
            if(this.durationParams.length > 0) {
                this.transformDura()
                param.videoDurationMin = this.videoDurationMin
                param.videoDurationMax = this.videoDurationMax

            }
            videoClassroomListPage(param).then(res => {
                if (res.code == 0) {
                    this.meetingData = res.data.records;
                    this.paging.total = parseInt(res.data.total);
                }
            })

        },
        showDetail(item) {
            this.$router.push({ path: "videoClassroomListDetail", query: { id: item.id } });
        },
        handleFilter(e, key, title) {
            console.log(e)
            this._data[key] = e.map((item) => item.id);
            this._data[key].splice(0, 0);
            if (e.length > 0) {
                const index = this.topFormData.findIndex((item) => item.key === key);
                if (this.topFormData.length === 0 || index === -1)
                    this.topFormData.push({ name: title, value: e, key: key });
                else {
                    this.$set(this.topFormData[index], "value", [...e]);
                }
            }
            this.loadData(true);
            console.log(this._data);
        },
        onShowSizeChange(current, pageSize) {
            this.paging.pageSize = pageSize;
            this.paging.current = current;
            this.loadData(true);
        },
        //当前页改变
        pageChange(page, pageSize) {
            this.paging.current = page;
            this.paging.pageSize = pageSize;
            this.loadData(false);
        },
        onChange(dates, dateStrings) {
            this.startTime = dateStrings[0];
            this.endTime = dateStrings[1];
            this.loadData(true);
        },
    },
};
</script>
    
<style scoped lang="scss">
$colorPrimary: #3370FF;

/deep/ .ant-calendar-range-picker-input:placeholder-shown {
    font-size: 12px;
}

.my-rate-style {
    display: inline;
    font-size: 12px;
    vertical-align: top;
}

.videoClassroomList_filter_row {
    background-color: #fff;
    padding: 10px 0;
    margin: 0 20px;
    border-bottom: 1px dashed #e2e2e2;
}

.videoClassroomList_filter_title {
    padding: 10px 0;
}

.videoClassroomList {
    background-color: #f6f6f6;
}

.videoClassroomList_advert {
    height: 200px;

    img {
        width: 100%;
        height: 100%;
    }
}

.videoClassroomList_list {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
}

.videoClassroomList_list {
    margin-top: 30px !important;
    // padding: 10px;
    padding: 30px 0px 30px 30px;
    background-color: #fff;
}

.videoClassroomItem {
    width: 265px;
    cursor: pointer;
    // height: 215px;
    border-radius: 4px;
    opacity: 1;
    margin-bottom: 20px;
    margin-right: 25px;
    /* 灰度/纯白 */
    background: #FFFFFF;

    box-sizing: border-box;
    /* 灰度/组件线框 */
    border: 0.5px solid #E2E2E2;

    /* 投影/投影S */
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);

    .videoImgWrap {
        position: relative;
    }

    .videoImg {
        width: 100%;
        height: 135px;
        border-radius: 4px;

    }

    .videoTime {
        position: absolute;
        right: 5px;
        bottom: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 3px 10px;
        border-radius: 20px;
    }

    .videoSub {
        color: #909090;
        font-size: 12px;
        padding: 0 10px;
    }

    .videoInfo {
        padding: 0px 10px 10px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        margin-top: 5px;

        .videoMonth {
            margin-top: 1px;
            // color: #909090;
            vertical-align: middle;
        }
    }

    .videoName {
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;

        .name {
            font-size: 14px;
            font-weight: bold;
        }

        .tag {
            padding: 0px 10px;
            background-color: #fd9;
            border-radius: 12px;
            font-size: 12px;
            line-height: 22px;
        }
    }
}



.catalogBox {
    background: #fff;
    margin-bottom: 20px;
}

.titBox {
    background: #fff;
    border: 1px solid rgba(226, 226, 226, 1);
    padding: 0 5px;
    margin-right: 5px;
    display: inline-block;

    .firstChild {
        color: rgba(100, 100, 100, 1);
    }
}

.searchItem {
    margin-top: 10px;
}

.searchItem .titBox {
    background: #fff;
    border: 1px solid rgba(226, 226, 226, 1);
    margin-top: 9px;
    padding: 0 5px;
    margin-left: 10px;

    .firstChild {
        color: rgba(100, 100, 100, 1);
    }

    .twoChild {
        color: #1890ff;
    }
}

.filter-wrapper {
    width: 100%;
    margin: 20px auto;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);

    // &:last-child {
    //   padding: 20px;
    // }

    .ant-radio-button-wrapper {
        padding-right: 30px;
        user-select: none;

        &:first-child {
            padding-right: 15px;
        }
    }

    .icon-wrapper {
        display: inline-block;
        position: absolute;
        right: 15px;

        i {
            font-size: 12px;
            color: #909090;
            display: block;

            &.active {
                color: var(--customThemeColor);
            }

            &:first-child {
                margin-top: 4px;
            }

            &:last-child {
                margin-top: -4px;
            }
        }
    }
}

.pagination-box {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    padding-left: 10px;
}

.pagination-box .pagination-r {
    text-align: right;
}
</style>
    